<!--
 * @Description: form
 * @Author: rendc
 * @Date: 2022-09-15 10:53:46
 * @LastEditors: rendc
 * @LastEditTime: 2022-09-16 09:43:11
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>form</title>
</head>
<body>
  <h2>欢迎登录</h2>
  <form action="" method="get">
  <fieldset>
    <label for="username">用户名:</label>
    <input id="username" name="username" type="text">
    <br>
    <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
    <input id="password" name="password" type="password">
    <br>
    性别
    <input type="radio" name="gender" value="男" id="radio1">
    <label for="radio1">男</label>
    <input type="radio" name="gender" value="女" id="radio2">
    <label for="radio2">女</label>
    <br>
</fieldset>
    
    爱好
    <input type="checkbox" name="like" value="足球" id="box1">
    <label for="box1">⚽️</label>
    <input type="checkbox" name="like" value="篮球" id="box2">
    <label for="box2">🏀</label>
    <input type="checkbox" name="like" value="网球" id="box3">
    <label for="box3">🎾</label>
    <br>
    喜欢的书籍
    <select  name="bookId" id="bookSelect">
      <option disabled value="1">西游记</option>
      <option value="2">红楼梦</option>
      <option value="3">三国演义</option>
      <option selected value="4">水浒传</option>
    </select>
    <br>
    评价<br>
    <textarea readonly name="desc" id="descText" cols="30" rows="10">我同意用户协议</textarea><br>
    <fieldset>
      <legend>日期时间类</legend>
    <input type="date"><br>
    <input type="datetime-local"><br>
    <input type="month"><br>
    <input type="week"><br>
    <input type="time"><br>
  </fieldset>
  <fieldset>
    <legend>颜色、文件</legend>
    <label for="colorInput">颜色</label>
    <input type="color" name="color" id="colorInput">
    <br>
    <label for="fileInput">文件</label>
    <input type="file" name="file" id="fileInput">
    <br>
  </fieldset>
  <br>
    隐藏表单项
    <input type="text" name="type" value="注册" hidden>
    <br>
    range
    <input type="range" name="range" id="" min="10" max="100">
    <br>
    数值
    <input type="number" name="" id="">
    <br>
    <input type="submit" value="提交按钮">
    <br>
    图片提交按钮
    <input type="image" src="./color.png" alt="" width="100px">
    <br>
    <input type="button" value="普通按钮">
  </form>
</body>
</html>